<template>
    <div class="user-home-container">
        <!-- 概览 -->
        <UserOverview />


        <!-- 骨架屏区域开始 -->
        <el-skeleton animated :loading="isShowSkeleton">
          <template #template>
            <div class="goods-panel-wrap">
              <div class="title-wrap">
                <el-skeleton-item style="width: 100px;margin: 0 10px;height: 35px;" />
                <el-skeleton-item style="width: 35px;margin: 0 10px;height: 18px;" />
              </div>
              <div class="content-wrap">
                <div class="item-wrap" v-for="(item, index) in 4" :key="index">
                  <el-skeleton-item variant="image" style="width: 220px; height: 200px" />
                  <el-skeleton-item style="width: 220px;height: 20px;margin-top: 10px;" />
                  <div class="price-wrap">
                    <el-skeleton-item style="width: 60px;height: 20px;margin-top: 10px;" />
                    <el-skeleton-item style="width: 60px;height: 20px;margin-top: 10px;" />
                  </div>
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
        <!-- 骨架屏区域结束 -->

        <!-- 我的收藏 -->
        <UserPanel title="我的收藏" moreUrl="/user/collect-goods">
          <template v-if="userCollectGoods.length > 0">
            <TridentGoodsItem v-for="(userCollectGood, i) in userCollectGoods" :key="i" :goods="userCollectGood" />
          </template>
          <div style="margin: 0 auto;" v-else>
            <TridentEmpty />
          </div>
        </UserPanel>

        <!-- 我的足迹 -->
        <UserPanel title="我的足迹" moreUrl="/user/footprint">
          <template v-if="footprintList.length > 0">
            <TridentGoodsItem v-for="(item, i) in footprintList" :key="i" :goods="item" />
          </template>
          <div style="margin: 0 auto;" v-else>
            <TridentEmpty />
          </div>
        </UserPanel>


        <!-- 我的关注 -->
        <UserPanel title="我的关注" moreUrl="/user/follow-goods">
          <template v-if="followList.length > 0">
            <TridentGoodsItem v-for="(item, i) in followList" :key="i" :goods="item" />
          </template>
          <div style="margin: 0 auto;" v-else>
            <TridentEmpty />
          </div>
          <!-- <Empty v-else/> -->
        </UserPanel>

        <!-- 猜你喜欢 -->
        <TridentGuessLike title="猜你喜欢" :size="3"/>
    </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'

import { reqUserGoodsCollectListAPI } from '@/apis/goodsCollect'
import { reqUserGoodsFollowListAPI } from "@/apis/goodsFollow"
import { reqUserFootprintListAPI } from "@/apis/footprint"

import UserOverview from '../components/UserOverview.vue'
import UserPanel from '../components/UserPanel.vue'



// ------------------ 定义全局变量开始 ------------------
const isShowSkeleton = ref(false)
// ------------------ 定义全局变量结束 ------------------

// -------------------- 挂载页面开始 --------------------
onMounted(async () => {
  await Promise.all([
    getUserCollectGoods(),
    getFootprintList(),
    getGoodsFollowList(),
  ])
})
// -------------------- 挂载页面开始 --------------------



// -------------------- 我的收藏开始 --------------------
const userCollectGoods = ref([])
// 获取用户收藏的商品
const getUserCollectGoods = async () => {
  isShowSkeleton.value = true
  const result = await reqUserGoodsCollectListAPI({page:1, page_size:4})
  if (result.code == 200) {
    userCollectGoods.value = result.data.user_goods_collects != null ? result.data.user_goods_collects : []
    userCollectGoods.value.forEach(item => {
      item.price = item.goods_price
      item.market_price = item.goods_price
      item.cover_url = item.goods_cover_url
      item.sales_num = 10000
    });
  }

  isShowSkeleton.value = false
}
// -------------------- 我的收藏结束 --------------------



// -------------------- 我的足迹开始 --------------------
// 定义足迹变量
const footprintList = ref([])

// 请求足迹数据
const getFootprintList = async () => {
	// 请求数据
	const result = await reqUserFootprintListAPI({page_size: 4})
	let footprints = result.data.user_footprints != null ? result.data.user_footprints : []
  footprints.forEach(item => {
    item.name = item.goods_name
    item.market_price = item.goods_price
    item.price = item.goods_price
    item.cover_url = item.goods_cover_url
    item.sales_num = 10000
  })

  footprintList.value = footprints
}
// -------------------- 我的足迹结束 --------------------

// -------------------- 我的关注开始 --------------------
// 定义关注变量
const followList = ref([])

// 请求关注数据
const getGoodsFollowList = async () => {
	const result = await reqUserGoodsFollowListAPI({page_size: 4})
	let goodsFollows = result.data.user_goods_follows != null ? result.data.user_goods_follows : []
  goodsFollows.forEach(item => {
      item.name = item.goods_name
      item.market_price = item.goods_price
      item.price = item.goods_price
      item.cover_url = item.goods_cover_url
      item.sales_num = 10000
  })

  followList.value = goodsFollows
}
// --------------------- 我的关注结束 ---------------------

</script>

<style scoped lang="scss">
.user-home-container {
  .goods-panel-wrap {
    background-color: #fff;
    padding: 20px 10px;
    margin-top: 20px;
    .title-wrap {
      display: flex;
      justify-content: space-between;
      padding-bottom: 20px;
    }
    .content-wrap {
      display: flex;
      padding-top: 20px;
      border-top: 1px solid #F5F5F5;
      .item-wrap {
        padding: 0 10px;
        .price-wrap {
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}
</style>